<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <audio id="bgm" src="assets/bgm.mp3"></audio>
    <div class="music-btn off"></div>

    <!-- 动画 -->
     <div class="view"></div>

     <!-- 太阳 -->
      <div class="sun"></div>

     <!-- 秋千 -->
      <div class="art">
        <div class="swing">
            <div class="leg1">
                <div class="feet"></div>
            </div>
            <div class="leg2">
                <div class="feet"></div>
            </div>
        </div>
      </div>

      <!-- 文字 -->
       <div class="text"></div>
</body>
<script>
    const musicbtn = document.querySelector('.music-btn')
    const bgm = document.getElementById('bgm')
    let isPlay = false

    musicbtn.addEventListener('click',function(){
        musicbtn.classList.toggle('off')
        bgm.play()
        isPlay = !isPlay
        if(isPlay){
            bgm.play()
        }else{
            bgm.pause()
        }
    })
</script>
</html>